@mixin gen_grid($columns: 12, $spaceMap) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    .grid-item {
      width: 100%;
      box-sizing: border-box;
    }

    @for $i from 2 through $columns {
      &.column_#{$i} {
        $width: calc(100% / #{$i});
        .grid-item {
          width: $width;
        }
        $subColumns: $i;
        @if $subColumns >= 2 {
          @for $si from 1 through $subColumns{
            .grid-item.column_#{$si}{
              width: calc($width * #{$si});

            }
          }
        } 
      }
    }

    @each $key, $val in $spaceMap {
      &.gap_#{$key} {
        padding: calc($val/2);
        &.gap_unset {
          margin: -$val;
        }
        .grid-item {
          padding: calc($val/2);
        }
      }
    }
  }
}
@include gen_grid(12, $spaces);
